<template>
  <div>
    <van-nav-bar :title="$route.name" @click-left="$router.back()" left-text="返回" left-arrow/>
    <!-- 个人资料 通过是否登录来判断当前组件视图的渲染内容 -->
    <!-- 已登录状态 -->
    <div v-if="getUser" class="userinfo">
      <van-image round width="80px" height="80px" :src="getUser.avatarurl"/>
      <p>{{ getUser.nickname }}</p>
      <van-button @click="logout" type="primary" size="small">离我而去</van-button>
    </div>
    <div class="userinfo" v-else>
      <van-image
        round
        width="80px"
        height="80px"
        src="https://img1.baidu.com/it/u=1244239780,4153872155&fm=26&fmt=auto"
      />
      <p>XXX</p>
      <van-button @click="$router.push('/login')" type="primary" size="small">去登录</van-button>
    </div>
    <!-- 单元格展示 -->
    <van-cell icon="location-o" title="地址管理" is-link/>
    <van-cell icon="balance-o" title="我的钱包" is-link/>
    <van-cell icon="scan" title="我二维码" is-link/>
    <van-cell icon="friends-o" title="我的小伙伴" is-link/>
  </div>
</template>

<script>
import {mapGetters} from 'vuex'
export default {
  data() {
    return {};
  },
  computed:{
      ...mapGetters(["getUser"])
  },
  methods:{
      //封装一个退出事件
      logout(){
          this.$store.dispatch("changeUser",false)
      }
  }
};
</script>

<style scoped>
.userinfo {
  text-align: center;
}
</style>
